<template>
  <div class="content-wrap">
    <div class="colse-bug-list">
      <el-icon :size="18" @click="colseBugList"><Close /></el-icon>
    </div>
    <el-container class="container-wrap">
      <!-- 左侧BUG列表区域 -->
      <div class="aside-wrap">
        <div class="bug-search-box">
          <!-- 搜索框 -->
          <el-input
            class="bug-search"
            v-model="searchData"
            placeholder="请输入Bug名称"
            clearable
            @change="handleSearch(searchData)"
            @input="handleSearch(searchData)"
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
          <!-- 点击打开抽屉：横向展示bug列表 -->
          <el-icon class="drawer-icon" :size="18" @click="drawerVisible = true"><DArrowRight /></el-icon>
        </div>
        <!-- bug列表 -->
        <ul class="bug-list bug-scrollbar">
          <li
            class="bug-item"
            v-for="(bug, index) in allRequirementBugsList"
            :key="index"
            @click="getBugInfo(bug.ID)"
            :class="{ 'active-bug': isActiveBugID === bug.ID ? true : false }"
          > 
            <!-- 标题 -->
            <el-tooltip effect="dark" :content="bug.bug_title" placement="right" offset="110" transition="none" hide-after="0">
              <div class="bug-item-title">{{ bug.bug_title }}</div>
            </el-tooltip>
            <!-- 状态 -->
            <!-- <div
            :style="{ color: bugItemStatus(bug.bug_status).color }"
            class="bug-item-status"
            >
              {{ bugItemStatus(bug.bug_status).status }}
            </div> -->
            <el-dropdown @command="handleComand">
              <span class="bug-item-status" :style="{ color: bugItemStatus(bug.bug_status).color }">{{ bugItemStatus(bug.bug_status).status }}<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item style="font-size: 0.65rem;" v-for="(status, index) in bugStatusList" :key="index" :command="status.bug_status_name">{{ status.bug_status_name }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
        </ul>

        <!-- 添加bug按钮 -->
        <el-button class="bug-add-btn" @click="handleAddBug">添加bug</el-button>
      </div>

      <!-- 右侧BUG区域 -->
      <div class="bug-info-wrap">
        <!-- BUG标题区域 -->
        <div class="bug-info-common bug-info-top">
          <!-- 修改bug等级 -->
          <div
            class="bug-info-top-level-box"
            :class="[
              checkBugLevel === '致命'
                ? 'bug-level-0'
                :checkBugLevel === '严重'
                ? 'bug-level-1'
                : checkBugLevel === '一般'
                ? 'bug-level-2'
                : 'bug-level-3'
            ]"
            @click="isLevelSelect = true"
          >
            <p>{{ checkBugLevel }}</p>
            <el-icon :size="18" style="height: 100%; line-height: 100%">
              <ArrowDownBold />
            </el-icon>
            <div class="bug-info-level-select" v-if="isLevelSelect">
              <ul
                @mouseenter="isLevelSelect = true"
                @mouseleave="isLevelSelect = false"
              >
                <li
                  v-for="(item, id) in bugLevelSelect"
                  :key="id"
                  :class="[ id === 0 ? 'bug-level-0' : id === 1 ? 'bug-level-1' : id === 2 ? 'bug-level-2' : 'bug-level-3']"
                  @click="changeBugLevel(id)"
                >
                  {{ item.bug_level }}
                </li>
              </ul>
            </div>
          </div>
          <!-- bug标题 -->
          <div class="bug-info-top-title-box">{{ bugInfo.bug_title }}</div>
          <!-- 修改bug关联修复人 -->
          <div class="bug-info-top-role-box">
            <div style="font-weight: bold; min-width: 60px;">修复人：</div>
            <div>
              <el-select
                v-model="bugInfo.edit_user_ids"
                filterable
                multiple
                placeholder="请选择修复人员"
                style="min-width: 220px"
                @change="updateBugRoles"
                @remove-tag="removeBugRoles">
                <el-option
                  v-for="(item, index) in allCaseAvater"
                  :key="index"
                  :label="item.nickName"
                  :value="item.uuid"
                />
              </el-select>
            </div>

            <!-- 头像模式更改修复人 -->
           <!--  <div class="bug-info-top-role" v-if="checkRoleListAvatars === null"></div>
            <div class="bug-info-top-role" v-else>
              <div>
                <AvatarList :list="checkRoleListAvatars" :max="5" size="small" :excess-style="excessStyle"></AvatarList>
              </div>
            </div>
            <div>
              <el-icon
                class="bug-info-top-active"
                :size="24"
                @mouseenter="handleShowBugCases"
                @mouseleave="handleHideBugCases"
              >
                <CirclePlus />
              </el-icon>
              <div v-if="isRoleSelect">
                <ul
                  class="bug-info-select-cases bug-scrollbar"
                  @mouseenter="handleShowBugCases"
                  @mouseleave="handleHideBugCases"
                >
                  <li
                    class="bug-info-select-item"
                    v-for="(item, index) in allCaseAvater"
                    :key="index"
                    @click="changeRoleName(item)"
                    :class="{ checkedRole: isActiveRole(item) }"
                  >
                    <el-avatar :size="20" :src="item.headerImg" />
                    <p class="bug-info-select-item-name">
                      {{ item.nickName }}
                    </p>
                  </li>
                </ul>
              </div>
            </div> -->
          </div>
        </div>
        <!-- BUG内容区域 -->
        <div class="bug-info-common bug-info-menu-box" ref="bugMenu">
          <!-- BUG详情区域 -->
          <el-card class="bug-info-common bug-info-center bug-info-scrollbar">
            <BugInfos :bugMsgs="bugInfo.bug_msgs"></BugInfos>
          </el-card>
          <!-- BUG评论区域 -->
          <el-card class="bug-info-common bug-info-bottom bug-scrollbar">
             <!-- 编辑框 -->
            <div class="comment-text-box">
              <AddBugMsgVue
              :modelValue="bugMsgInfo"
              @update:modelValue="addBugInfoValue"
            />
            </div>
            <!-- 评论按钮 -->
            <div class="bug-info-btn-box">
              <el-button class="comment-btn" type="submit" @click="handleAddBugMsg">评论</el-button>
            </div>
          </el-card>
        </div>

        <!-- 右键修改bug状态 -->
        <div class="bug-info-item-affix-container" v-show="isShowStatus">
          <el-radio-group style="width: 100%;" v-model="isActiveBugStatus" size="large" 
            text-color="#fff" 
            @change="changeBugStatus">
            <el-radio-button 
              size="small"
              v-for="item in bugStatusList" 
              :label="item.bug_status_name" :value="item.bug_status" />
          </el-radio-group>
        </div>
      </div>
    </el-container>

    <!-- 添加bug弹窗 -->
    <!-- <el-dialog
      id="dialogAddBugForm"
      v-model="dialogAddBugVisible"
      title="添加Bug"
      width="1200px"
      style="height: calc(100% - 100px); margin: 50px auto"
      :show-close="true"
      :before-close="handleBeforeCancel"
    >
      <el-form class="dialog-form-box" :model="addBugData" :rules="addBugRules">
        <el-form-item prop="bugTitle">
          <div class="dialog-top-box">
            <div class="dialog-top-left">
              <div>
                <el-icon :size="20">
                  <CollectionTag />
                </el-icon>
              </div>
              <div class="dialog-title"><span style="color: red;">&ast;&nbsp;</span>标题:</div>
              <el-input
                class="dialog-ipt"
                size="small"
                placeholder="请输入发现的bug现象"
                v-model="addBugData.bug_title"
              ></el-input>
            </div>
            <div class="dialog-top-right">
              <div>
                <el-icon :size="20">
                  <User />
                </el-icon>
              </div>
              <div class="dialog-title"><span style="color: red;">&ast;&nbsp;</span>修复人:</div>
              <div v-for="(item, index) in checkRoleList" :key="index">
                <el-avatar :size="32" :src="item.headerImg" />
              </div>
              <div>
                <div>
                  <el-icon
                    class="dialog-active"
                    :size="32"
                    @mouseenter="handleShowBugCases"
                    @mouseleave="handleHideBugCases"
                  >
                    <CirclePlus />
                  </el-icon>
                  <div v-if="isRoleSelect">
                    <ul
                      class="dialog-select-cases"
                      @mouseenter="handleShowBugCases"
                      @mouseleave="handleHideBugCases"
                    >
                      <li
                        class="dialog-select-item"
                        v-for="(item, index) in allCaseAvater"
                        :key="index"
                        @click="toggleRoleName(item)"
                        :class="{ checkedRole: isCheckedRole(item) }"
                      >
                        <el-avatar :size="20" :src="item.headerImg" />
                        <p class="dialog-select-item-name">
                          {{ item.nickName }}
                        </p>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="dialog-top-box" style="margin-top: 0; height: 40px">
            <div>
              <el-icon :size="20">
                <EditPen />
              </el-icon>
            </div>
            <div class="dialog-title">BUG等级:</div>
            <el-radio-group v-model="addBugData.bug_level" size="large">
              <el-radio-button label="严重" :value="0" class="bug-level-1" />
              <el-radio-button label="一般" :value="1" class="bug-level-2" />
              <el-radio-button label="建议" :value="2" class="bug-level-3" />
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item prop="bugMsgs">
          <div class="bug-edit-box bug-scrollbar">
            <EditorVue
              :modelValue="addBugData.bug_msgs[0].bug_msg"
              @update:modelValue="updateModelValue"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <div class="bug-edit-btn">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleAddBugData">
              提交
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog> -->

     <!-- 添加BUG弹窗 -->
     <el-dialog
      id="dialogAddBugForm"
      v-model="dialogAddBugVisible"
      title="添加Bug"
      width="1200px"
      style="width: 1200px; height: calc(100% - 100px); margin: 50px auto;"
      :show-close="true"
      :before-close="handleBeforeCancel"
    >
      <!-- 编辑bug区域 -->
      <el-form class="dialog-form-box" ref="addBugFormRef" :model="addBugData" :rules="addBugRules">
        <!-- 标题 -->
        <el-form-item class="dialog-form-item-box" prop="bug_title" style="width: 60%;">
          <div>
            <el-icon class="dialog-form-item-icon" :size="20">
              <CollectionTag />
            </el-icon>
          </div>
          <div class="dialog-title"><span style="color: red;">&ast;&nbsp;</span>标题：</div>
          <el-input
            style="width: 400px;"
            size="defalut"
            placeholder="请输入发现的bug现象"
            v-model="addBugData.bug_title"
          >
          </el-input>
        </el-form-item>

        <!-- 修复人 -->
        <el-form-item class="dialog-form-item-box" prop="edit_user_ids" style="width: 40%">
          <div>
            <el-icon class="dialog-form-item-icon" :size="20">
              <User />
            </el-icon>
          </div>
          <div class="dialog-title"><span style="color: red;">&ast;&nbsp;</span>修复人：</div>
          <div>
              <el-select
                v-model="addBugData.edit_user_ids"
                filterable
                multiple
                clearable
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="2"
                placeholder="请选择修复人员"
                style="width: 260px">
                <el-option
                  v-for="(item, index) in allCaseAvater"
                  :key="index"
                  :label="item.nickName"
                  :value="item.uuid"
                />
              </el-select>
            </div>
        </el-form-item>

        <!-- bug等级 -->
        <el-form-item class="dialog-form-item-box" prop="bug_level" style="width: 100%;">
          <div>
            <el-icon class="dialog-form-item-icon" :size="20">
              <EditPen />
            </el-icon>
          </div>
          <div class="dialog-title">&nbsp;&nbsp;BUG等级：</div>
          <el-radio-group v-model="addBugData.bug_level" size="large">
            <el-radio-button label="致命" :value="0" class="bug-level-0" />
            <el-radio-button label="严重" :value="1" class="bug-level-1" />
            <el-radio-button label="一般" :value="2" class="bug-level-2" />
            <el-radio-button label="建议" :value="3" class="bug-level-3" />
          </el-radio-group>
        </el-form-item>

        <!-- 编辑bug -->
        <el-form-item prop="bug_msgs" style="width: 100%;">
          <div class="bug-edit-box">
            <EditorVue
              v-model="addBugData.bug_msgs[0].bug_msg"
              @update:modelValue="updateModelValue"
            />
          </div>
        </el-form-item>

        <!-- 底部添加/取消按钮 -->
        <el-form-item style="width: 100%;">
          <div class="bug-edit-btn">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleAddBugData(addBugFormRef)">
              提交
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 横向bug列表 -->
    <el-drawer style="background-color: rgb(243.9, 244.2, 244.8);" v-model="drawerVisible" :with-header="false" :show-close="true" size="510px" direction="ltr">
      <div class="drawer-bug-list-box">
        <el-card class="drawer-bug-card" v-for="(bug, index) in allRequirementBugsList" :key="index" shadow="hover" @click="getBugInfo(bug.ID)">
          <el-col :span="24" class="drawer-bug-item-title">{{ bug.bug_title }}</el-col>
          <el-col :span="24">
            <el-row justify="space-between" class="drawer-bug-samll">
              <el-row style="width: 60%;" justify="start">
                <el-col :span="8">状态：</el-col>
                <el-col :span="16" :style="{ color: bugItemStatus(bug.bug_status).color }">{{ bugItemStatus(bug.bug_status).status }}</el-col>
              </el-row>
              <el-row style="width: 40%;" justify="end">
                <el-col :span="12">等级：</el-col>
                <el-col :span="12" :style="{ color: bugItemLevel(bug.bug_level).bgColor }">{{ bugItemLevel(bug.bug_level).text }}</el-col>
              </el-row>
            </el-row>
          </el-col>
          <el-row class="drawer-bug-samll">
            <el-col :span="6">修复人：</el-col>
            <el-col :span="18">{{ bug.edit_user_name }}</el-col>
          </el-row>
          <el-col :span="24" class="drawer-bug-item-time">{{ tableTimeDateMsg(bug.createAt) }}</el-col>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import EditorVue from "../editor.vue";
import BugInfos from "./bugInfos.vue";
import AddBugMsgVue from "./addBugMsg.vue";
import { ref, onMounted, reactive, onBeforeUnmount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { isValidateEditor, tableTimeDateMsg } from "@/utils/utils"; //引入公共函数
import { ElMessage, FormInstance } from "element-plus";
import {
  getRequirementBugs,
  findBugMsgById,
  addRequirementBug,
  getBugUsers,
  updateBugLevelById,
  updateBugRoleById,
  addBugMsgById,
  updateBugStatusId,
  getBugStatusList,
} from "@/api/bug";
import useCommonDataStore from "@/store/common/common"; //获取所有的修复人
import type {
  getRequirementsBugsDataList,
  CommonRequirementBugs,
} from "@/api/bug/type";

const route = useRoute();
const router = useRouter();
const loading = ref(false);

// bug详情区域
const bugMenu = ref();
// 控制是否显示修改bug状态区域
const isShowStatus = ref(false);
// 定义添加bug表单实例
const addBugFormRef = ref<FormInstance>();
//接收路由参数-需求ID
const requirementID = route.params.id;
// 定义当前需求的全部数据
const allRequirementBugsData = ref([] as getRequirementsBugsDataList[]);
// 定义当前需求的全部BugsList
const allRequirementBugsList = ref([] as CommonRequirementBugs[]);
// 定义当前需求的所有bug_title
const allBugTitle = ref<any>([]);
// 定义bug修复状态动态颜色方法
const bugItemStatus = (val: number) => {
  return {
    color: bugStatusList.value[val-1].bugStatusColor,
    status: bugStatusList.value[val-1].bug_status_name
  }
};

// 定义bug等级状态动态颜色方法
const bugItemLevel = (val: number) => {
  switch (val) {
    case 0:
      return {
        level: 0,
        text: "致命",
        bgColor: "#B40404"
      };
    case 1:
      return {
        level: 1,
        text: "严重",
        bgColor: "#f56c6c"
      };
    case 2:
      return {
        level: 2,
        text: "一般",
        bgColor: "#67c23a"
      };
    case 3:
      return {
        level: 3,
        text: "建议",
        bgColor: "#409eff"
      };
    default:
      return {
        level: 3,
        text: "建议",
        bgColor: "#f56c6c"
      };
  }
};


// 定义查询BUG关键字
const searchData = ref("");
// 定义初始化ItemBug的方法
const initBugInfo = () => ({
  item_requirement_id: 0,
  bug_title: "",
  bug_level: 0,
  create_user_id: 0,
  create_user_name: "",
  edit_user_id: 0,
  edit_user_ids: [] as any,
  edit_user_name: "",
  end_edit_user_name: "",
  edit_user_names: "",
  edit_num: 0,
  bug_status: 0,
  bug_tips: "",
  bug_msgs: [] as any,
  bug_img_url: "",
  ID: 0,
  createAt: "",
  UpdatedAt: "",
});
// 定义ItemBug初始值
const bugInfo = reactive(initBugInfo());
// 定义选中bugID
const isActiveBugID = ref(0);
// 定义选中bugStatus
const isActiveBugStatus = ref<number>(1);
// 定义添加bug弹窗控件
const dialogAddBugVisible = ref(false);
// // 定义修复人下拉列表控件
// const isRoleSelect = ref(false);
// // 用于临时存储选中修复人员
// const checkRoleList = ref([] as any);
// // 用于渲染bug详情区域的修复人的过渡数据
// const checkRoleListAvatars = ref([] as any);
// // 自定义超出修复人个数的数字样式
// const excessStyle = {
//   color: '#f56a00',
//   backgroundColor: '#fde3cf'
// }
// 定义所有修复人员姓名和头像
const allCaseAvater = ref<any>([]);
let allRoleUsersStore = useCommonDataStore();

// * 添加bug弹窗 
// 初始化-添加bug弹窗
const initAddBug = () => ({
  item_requirement_id: 0,
  bug_title: "",
  bug_level: 0,
  edit_user_ids: [] as Array<any>,
  bug_status: 0,
  bug_msgs: [
    { bug_msg: "" }
  ]
  ,
});
// 定义添加bug表单验证规则
const addBugRules = reactive({
  bug_title: [
    {
      required: true,
      message: "请输入bug名称",
      trigger: "blur",
    },
  ],
  edit_user_ids: [{
      required: true,
      message: "请选择修复人员",
      trigger: "blur",
  }],
  bug_msgs: [{
    validator: (rule: any, value: any, callBack: any) => {
      if ((isValidateEditor(value[0].bug_msg))) {
        // alert(`"富文本校验结果：",${isValidateEditor(value[0].bug_msg)}`);
        callBack(new Error('BUG详情不能为空'));
      } else {
        callBack();
      }
    },
    required: true,
    trigger: "blur",
  }]
 /*  bug_msgs: [
    {
      required: true,
      messgae: "请记录BUG",
      trigger: "blur",
    },
    {
      validator: (rule: any, value: any, callBack: any) => {
        if (!(isValidateEditor(value[0].bug_msg))) {
          alert(isValidateEditor(value[0].bug_msg));
          callBack(new Error("bug详情不能为空格或空行！"));
        } else {
          callBack();
        }
      },
      trigger: "blur"
    }
  ], */
});


// 定义添加bug请求参数初始值
const addBugData = reactive(initAddBug());
// 定义bugItem关联修复人
const checkBugUsers = ref([] as any);
// 定义bug等级下拉列表控件
const isLevelSelect = ref(false);
// 定义当前bug等级
const checkBugLevel = ref("致命");
// 定义bug等级下拉列表
const bugLevelSelect = [
  {
    id: 0,
    bug_level: "致命",
    bgColor: "#B40404"
  },
  {
    id: 1,
    bug_level: "严重",
    bgColor: "#f56c6c"
  },
  {
    id: 2,
    bug_level: "一般",
    bgColor: "#67c23a"
  },
  {
    id: 3,
    bug_level: "建议",
    bgColor: "#409eff"
  },
];
// 定义添加Bug详情初始值
const bugMsgInfo = ref("");
// 定义bugStatus
/* const bugStatusList = [
  {
    status: 1,
    text_status: "待确定",
  },
  {
    status: 2,
    text_status: "待修复",
  },
  {
    status: 3,
    text_status: "无效bug",
  },
  {
    status: 4,
    text_status: "待验证",
  },
  {
    status: 5,
    text_status: "待修复",
  },
  {
    status: 6,
    text_status: "已修复",
  },
  {
    status: 7,
    text_status: "关 闭",
  },
] */
const bugStatusList = ref([] as any);

// * 横向bug列表
// 定义抽屉控件
const drawerVisible = ref(false);



// TODO 获取BugsList的方法
const getRequirementBugsList = async () => {
  loading.value = true;
  allCaseAvater.value = await allRoleUsersStore.getAllRoleUsersList("");

  const { data } = await getRequirementBugs(Number(requirementID));

  // 存储响应数据
  if (data.code === 200) {
    allRequirementBugsData.value = data.data;
    allRequirementBugsList.value = data.data[0].requirementBugs.reverse();
    if (data.data[0].requirementBugs.length > 0) {
      allBugTitle.value = [
        ...new Set(allRequirementBugsList.value.map((item) => item.bug_title)),
      ];
      if (isActiveBugID.value === 0) {
        isActiveBugStatus.value = allRequirementBugsList.value[0].bug_status;
        await getBugInfo(allRequirementBugsList.value[0].ID);
      } else {
        await getBugInfo(isActiveBugID.value);
      }
    } else {
      allBugTitle.value = [];
    }
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }

  loading.value = false;
};


// TODO 获取bugStatusList
const getBugStatus = async () => {
  const { data } = await getBugStatusList();
  if (data.code === 200) {
    bugStatusList.value = data.data;
    console.log(bugStatusList.value);
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};


// TODO 点击BugID获取Bug详情
const getBugInfo = async (index: number) => {
  loading.value = true;
  drawerVisible.value = false;
  bugMsgInfo.value = "";

  //* 获取bugInfo
  const { data } = await findBugMsgById(index);
  // 滚动条
  const scrollContainer = document.querySelector('.bug-info-scrollbar');
  if (scrollContainer) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

  if (data.code === 200) {
    bugInfo.item_requirement_id = data.data.item_requirement_id;
    bugInfo.bug_title = data.data.bug_title;
    bugInfo.bug_level = data.data.bug_level;
    bugInfo.create_user_id = data.data.create_user_id;
    bugInfo.create_user_name = data.data.create_user_name;
    bugInfo.edit_user_id = data.data.create_user_id;
    bugInfo.edit_user_name = data.data.edit_user_name;
    bugInfo.end_edit_user_name = data.data.end_edit_user_name;
    bugInfo.edit_user_names = data.data.edit_user_names;
    bugInfo.edit_num = data.data.edit_num;
    bugInfo.bug_status = data.data.bug_status;
    bugInfo.bug_tips = data.data.bug_tips;
    bugInfo.bug_msgs = data.data.bug_msgs;
    bugInfo.bug_img_url = data.data.bug_img_url;
    bugInfo.ID = data.data.ID;
    bugInfo.createAt = data.data.createAt;
    bugInfo.UpdatedAt = data.data.UpdatedAt;
    // isActiveBugID.value = index;
    isActiveBugID.value = bugInfo.ID;
    isActiveBugStatus.value = bugInfo.bug_status;

    // 获取bug关联修复人
    const resData = await getBugUsers(index);
    if (resData.data.code === 200) {
      if (resData.data.data === null) {
        bugInfo.edit_user_ids = null;
        checkBugUsers.value = null;
      } else {
        bugInfo.edit_user_ids = resData.data.data.map((item: any) => item.uuid);
        checkBugUsers.value = resData.data.data;
        // checkRoleListAvatars.value = [...new Set(checkBugUsers.value.map((item:any) => {
        //   return {
        //     src: item.headerImg,
        //     tip: item.nickName
        //   }
        // }))];

      }
    } else {
      ElMessage.error(resData.data.msg);
      throw console.error(resData.data.msg);
    }

    // bug等级
    switch (bugInfo.bug_level) {
      case 0:
        return (checkBugLevel.value = "致命");
        break;
      case 1:
        return (checkBugLevel.value = "严重");
        break;
      case 2:
        return (checkBugLevel.value = "一般");
        break;
      case 3:
        return (checkBugLevel.value = "建议");
        break;
    }
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }

  loading.value = false;
};

// // 显示已有修复人样式
// const isActiveRole = (item: any) => {
//   if (checkBugUsers.value === null) {
//     return false;
//   } else {
//     const active = checkBugUsers.value.some((activeItem: any) => activeItem.uuid === item.uuid);
//     return active;
//   }
// };

// TODO bug详情页修改修复人
// 当选中修复人发生变化时触发函数
const updateBugRoles = async (value: any) => {
  const { data } = await updateBugRoleById({
    id: isActiveBugID.value,
    bug_edits: value,
  })

  if (data.code === 7) {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// 移出修复人触发
const removeBugRoles = async (value: any) => {
  if (bugInfo.edit_user_ids.length === 0) {
    bugInfo.edit_user_ids[0] = value;
    const { data } = await updateBugRoleById({
      id: isActiveBugID.value,
      bug_edits: bugInfo.edit_user_ids,
    });
    throw console.log(data.msg);
  }
}




// TODO 修改bugItem修复人
/* const changeRoleName = async (item: any) => {
  // 1、显示已有修复人
  isActiveRole(item);
  // 2、选中/撤销修复人
  // ! 处理当checkBugUsers.value === null时的问题
  if (checkBugUsers.value === null) {
    checkRoleListAvatars.value = null;
  } else {

    const selectIndex = checkBugUsers.value.findIndex(
      (checkItem: any) => checkItem.uuid === item.uuid
    );
    if (selectIndex > -1) {
      checkBugUsers.value.splice(selectIndex, 1);
    } else {
      checkBugUsers.value.push({ uuid: item.uuid, headerImg: item.headerImg, nickName: item.nickName, id: item.id });
    };
    const uuids = checkBugUsers.value.map((active: any) => active.uuid);
    // console.log(uuids);
    const { data } = await updateBugRoleById({
      id: isActiveBugID.value,
      bug_edits: uuids
    })
    if(data.code === 200) {
      // 处理关联修复人
      checkRoleListAvatars.value = [...new Set(checkBugUsers.value.map((item:any) => {
        return {
          src: item.headerImg,
          tip: item.nickName
        }
      }))];
    } else {
      ElMessage.error(data.msg);
      throw console.error(data.msg);
    }
  }

} */

// 定义鼠标右键事件的处理函数
const onRightClick = (event: any) => {
  // 阻止默认的右键菜单显示
  event.preventDefault();
  
  // 处理右键点击事件
  isShowStatus.value = true;
  setTimeout(() => {
    isShowStatus.value = false;
  }, 3000);
}

// TODO 更改bugStatus状态
const changeBugStatus = async () => {

  loading.value = true;

  const { data } = await updateBugStatusId({
    id: isActiveBugID.value,
    bug_status: Number(isActiveBugStatus.value)
  });

  if (data.code === 200) {
    let changeId = isActiveBugID.value;

    await getRequirementBugsList();
    await getBugInfo(changeId);

    isShowStatus.value = false;
    loading.value = false;
  } else {
    ElMessage.error(data.msg);
    return;
  }
};

const handleComand = async (command: string) => {
  isActiveBugStatus.value = bugStatusList.value.filter((item: any) => item.bug_status_name === command).map((item:any) => item.bug_status)[0];

  console.log(isActiveBugStatus.value);
  await changeBugStatus();
}


// TODO 左侧搜索功能
const handleSearch = async (val: string) => {
  if (val !== "") {
    await getRequirementBugsList();
    const filterBugs = allRequirementBugsList.value.filter((item) => {
      return item.bug_title.toLowerCase().includes(val.toLowerCase());
    });
    allRequirementBugsList.value = filterBugs;
  } else {
    await getRequirementBugsList();
  }
};

// TODO 点击添加bug按钮
// 点击【添加BUG】，开启弹窗
const handleAddBug = async () => {
  dialogAddBugVisible.value = true;

  addBugData.bug_level = 0;
  addBugData.item_requirement_id = 0;
  addBugData.bug_title = "";
  addBugData.bug_msgs[0].bug_msg = "";
  addBugData.bug_status = 0;
  addBugData.edit_user_ids = [];
  // checkRoleList.value = [];
  // console.log(checkRoleList.value);

  addBugData.item_requirement_id = Number(requirementID);
  // allCaseAvater.value = await allRoleUsersStore.handleBeforeUpload();
};

// // 鼠标移入添加修复人事件
// const handleShowBugCases = () => {
//   isRoleSelect.value = true;

// };

// // 鼠标移出添加修复人事件
// const handleHideBugCases = () => {
//   isRoleSelect.value = false;
// };

// // TODO 选择修复人
// const isCheckedRole = (item: any) => {
//   // console.log(item);
//   return checkRoleList.value.some(
//     (checkItem: any) => checkItem.uuid === item.uuid
//   );
// };
// const toggleRoleName = (item: any) => {
//   const selectIndex = checkRoleList.value.findIndex(
//     (checkItem: any) => checkItem.uuid === item.uuid
//   );
//   if (selectIndex > -1) {
//     checkRoleList.value.splice(selectIndex, 1);
//     addBugData.edit_user_ids = checkRoleList.value;
//   } else {
//     checkRoleList.value.push({ uuid: item.uuid, headerImg: item.headerImg });
//     addBugData.edit_user_ids = checkRoleList.value;
//   }
// };

// 富文本数据更新
const updateModelValue = (newValue: any) => {
  addBugData.bug_msgs[0].bug_msg = newValue;
  return addBugData.bug_msgs;
};

// TODO 提交添加bug
const handleAddBugData = async (formEl: FormInstance | undefined) => {
  loading.value = true;

  // 监听富文本内容
  window.addEventListener("update:modelValue", updateModelValue);

  if (!formEl) {
    console.error("表单验证失败，请将内容填写完整");
    return;
  };

  // 表单验证
  const validatePromise = formEl.validate();
  try {
    await validatePromise;
    // 表单验证成功
    // 发起请求
    const { data } = await addRequirementBug(addBugData);
    if(data.code === 200) {
        ElMessage.success(data.msg);
        initAddBug();
        getRequirementBugsList();
        dialogAddBugVisible.value = false;
        loading.value = false;
      } else {
        ElMessage.error(data.msg);
        initAddBug();
        getRequirementBugsList();
        dialogAddBugVisible.value = false;
        loading.value = false;
        throw console.error(data.msg);
      }
  } catch (error) {
    // 表单验证失败
    loading.value = false;
    console.error("表单验证失败，请将内容填写完整");
    console.log(addBugData);
    return;
  }


/*   if (addBugData.bug_title.trim() !== "") {
    if (addBugData.edit_user_ids.length !== 0 && addBugData.edit_user_ids !== null ) {
    // 点击提交按钮
    const { data } = await addRequirementBug({
      item_requirement_id: (addBugData.item_requirement_id = Number(requirementID)),
      bug_title: addBugData.bug_title,
      bug_level: addBugData.bug_level,
      edit_user_ids: (addBugData.edit_user_ids = checkRoleList.value.map(
        (item: any) => item.uuid
      )),
      bug_status: addBugData.bug_status,
      bug_msgs: addBugData.bug_msgs,
    });

    if (data.code === 200) {
      ElMessage.success(data.msg);
      initAddBug();
      getRequirementBugsList();
      dialogAddBugVisible.value = false;
      loading.value = false;
    } else {
      ElMessage.error(data.msg);
      initAddBug();
      getRequirementBugsList();
      dialogAddBugVisible.value = false;
      loading.value = false;
      throw console.error(data.msg);
    }
  } else {
        alert("请选择修复人！");
    }
  } else {
    alert("请输入bug名称！");
  } */
};

// TODO 取消添加bug
const handleCancel = () => {
  addBugData.bug_level = 0;
  addBugData.item_requirement_id = 0;
  addBugData.bug_title = "";
  addBugData.bug_msgs[0].bug_msg = "";
  addBugData.bug_status = 0;
  addBugData.edit_user_ids = [];
  // checkRoleList.value = [];

  dialogAddBugVisible.value = false;
  Object.assign(dialogAddBugVisible, initAddBug());
};
const handleBeforeCancel = (done: any) => {
  addBugData.bug_level = 0;
  addBugData.item_requirement_id = 0;
  addBugData.bug_title = "";
  addBugData.bug_msgs[0].bug_msg = "";
  addBugData.bug_status = 0;
  addBugData.edit_user_ids = [];
  // checkRoleList.value = [];

  dialogAddBugVisible.value = false;
  Object.assign(dialogAddBugVisible, initAddBug());
  done();
};

// TODO 修改BUG等级
const changeBugLevel = async (index: number) => {
  console.log(index);
  const { data } = await updateBugLevelById({
    id: isActiveBugID.value,
    bug_level: index
  })
  
  if(data.code === 200) {
    await getBugInfo(isActiveBugID.value);
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
}

// TODO 评论Bug
// 富文本数据更新
const addBugInfoValue = (newValue: any) => {
  bugMsgInfo.value = newValue;
  return bugMsgInfo.value;
};

const handleAddBugMsg = async () => {
  loading.value = true;

   // 监听富文本内容
   window.addEventListener("update:modelValue", updateModelValue);

  if (bugMsgInfo.value === "") {
    alert("请先填写评价内容！");
    return;
  };

  const { data } = await addBugMsgById({
    item_requirement_bug_id: isActiveBugID.value,
    new_bug_msgs: bugMsgInfo.value
  });

    // 滚动条
    const scrollContainer = document.querySelector('.bug-info-scrollbar');
    if (scrollContainer) {
      scrollContainer.scrollTop = scrollContainer.scrollHeight;
    }

  if (data.code === 200) {

    await getBugInfo(isActiveBugID.value);
    // bugMsgInfo.value = "";
    ElMessage.success(data.msg);

    // 滚动条
    const scrollContainer = document.querySelector('.bug-info-scrollbar');
    if (scrollContainer) {
      scrollContainer.scrollTop = scrollContainer.scrollHeight;
    }
    // loading.value = false;
  } else {
    // bugMsgInfo.value = "";
    ElMessage.error(data.msg);
    // loading.value = false;
    throw console.error(data.msg);
  };

  bugMsgInfo.value = "";
  loading.value = false;
}

// TODO 关闭bug列表页
const colseBugList = () => {
  router.push({
    name: "Bugs", 
  })
};


onMounted(() => {
  getBugStatus();
  getRequirementBugsList();
  // 监听鼠标右键事件
  bugMenu.value.addEventListener('contextmenu', onRightClick);
});

// 在组件卸载前移出右键监听事件
onBeforeUnmount(() => {
  bugMenu.value.removeEventListener('contextmenu', onRightClick);
})

</script>
<style lang="scss" scoped>
  // TODO 关闭bug详情页
  .colse-bug-list {
    width: calc(100% - 20px);
    position: absolute;
    display: flex;
    justify-content: flex-end;
    margin-top: 0px;
    right: 8px;
    .el-icon {
      width: 40px;
      text-align: right;
      cursor: pointer;
      color: #909399;
    }
    .el-icon:hover {
      color: #409eff;
    }
  }

.container-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;

  // TODO 左侧bug列表区域
  .aside-wrap {
    width: 280px;
    height: calc(100vh - 110px);
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #000;
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;

    .bug-search-box {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .bug-search {
        // width: 240px;
        height: 32px;
        margin-bottom: 5px;
      }
      .drawer-icon {
        height: 32px;
        margin-left: 10px;
      }
      .drawer-icon:hover {
        color: #409eff;
        cursor: pointer;
      }
    }

    .bug-list {
      width: 260px;
      height: calc(100vh - 110px - 52px);
      overflow: hidden;
      overflow-y: auto;
      list-style: none;
      margin: 0;
      padding: 0;

      .bug-item {
        width: 100%;
        height: 32px;
        margin-bottom: 5px;
        padding: 5px 10px;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;

        .bug-item-title {
          max-width: 150px;
          line-height: 22px;
          margin-right: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 12px;
        }

        .bug-item-status {
          width: 75px;
          line-height: 22px;
          text-align: center;
          font-size: 10px;
        }
      }

      .bug-item:hover {
        box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
        cursor: pointer;
        color: #409eff;
      }

      .active-bug {
        background-color: #409eff;

        .bug-item-title,
        .bug-item-status {
          color: white !important;
        }
      }
    }

    .bug-add-btn {
      color: white;
      background-color: #409eff;
      cursor: pointer;
    }

    .bug-add-btn:hover {
      background-color: rgb(121.3, 187.1, 255);
    }
  }

  // TODO 右侧bug详情区域
  .bug-info-wrap {
    width: calc(100% - 300px);
    height: 100%;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #ffffff;

    .bug-info-common {
      --el-card-padding: 10px;
      --el-card-border-radius: 0;
    }

    .bug-info-top,
    .bug-info-center {
      width: 100%;
      margin-bottom: 10px;
      position: relative;
    }
    // bug顶部区域
    .bug-info-top {
      // width: 100%;
      height: 50px;
      // margin-bottom: 10px;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      z-index: 99;
      // 修改bug等级
      .bug-info-top-level-box {
        // width: 80px;
        min-width: 80px;
        line-height: 30px;
        color: white;
        font-size: 14px;
        padding-left: 15px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        .bug-info-level-select {
          width: 80px;
          margin-top: 35px;
          margin-left: -15px;
          text-align: center;
          background-color: #ddd;
          position: absolute;
          li {
            margin-bottom: 2px;
          }
        }
      }
      .bug-level-0 {
        background-color: #B40404;
      }
      .bug-level-1 {
        background-color: #f56c6c;
      }
      .bug-level-2 {
        background-color: #67c23a;
      }
      .bug-level-3 {
        background-color: #409eff;
      }
      .bug-level-0:hover {
        background-color: #c33636;
      }
      .bug-level-1:hover {
        background-color: rgb(248, 152.1, 152.1);
      }
      .bug-level-2:hover {
        background-color: rgb(148.6, 212.3, 117.1);
      }
      .bug-level-3:hover {
        background-color: rgb(121.3, 187.1, 255);
      }

      // bug标题
      .bug-info-top-title-box {
        // width: 600px;
        width: calc(100% - 360px);
        height: 100%;
        margin: auto 20px;
        text-align: center;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: bold;
      }

      // 修改bug关联修复人
      .bug-info-top-role-box {
        min-width: 280px;
        line-height: 30px;
        display: flex;
        justify-content: flex-start;
        font-size: 14px;
        /* .bug-info-top-role {
          margin-left: 10px;
          margin-right: 10px;
        }
        .bug-info-top-active svg{
          color: #409eff;
          cursor: pointer;
          position: relative;
          margin-top: 6px;
        }
        .bug-info-top-active svg:hover {
          color: #79bbff;
        }
        .bug-info-select-cases {
          width: 100px;
          height: 180px;
          position: absolute;
          background-color: rgb(243.9, 244.2, 244.8);
          border: 1px solid #ddd;
          border-radius: 5px;
          margin-top: -9px;
          margin-left: -40px;
          overflow-y: auto;
          .bug-info-select-item {
            height: 34px;
            line-height: 32px;
            padding: 5px;
            border-bottom: 2px solid #fff;
            display: flex;
            justify-content: flex-start;
            cursor: pointer;
            .bug-info-select-item-name {
              display: inline-block;
              font-size: 12px;
              margin-left: 3px;
              line-height: 24px;
            }
          }
          .bug-info-select-item:hover {
            background-color: rgb(216.8, 235.6, 255);
            color: #000000;
          }
          .checkedRole {
            background-color: rgb(121.3, 187.1, 255);
            color: white;
          }
        } */
      }
    }

    .bug-info-menu-box {
      width: 100%;
      height: calc(100% - 50px);

      .bug-info-center {
        height: calc(100% - 250px);
        overflow-y: auto;
      }

      .bug-info-bottom {
        height: 230px;
        .comment-text-box {
          width: 100%;
          height: 170px;
          max-height: 170px;
          margin-bottom: 10px;
          .common-text {
            height: 170px;
            max-height: 170px;
            word-wrap: break-word;
          }
        }
        .bug-info-btn-box {
          width: 100%;
          height: 100%;
          .comment-btn {
            float: right;
            background-color: #409eff;
            color: white;
          }
          .comment-btn:hover {
            background-color: rgb(121.3, 187.1, 255);
          }
        }
      }
    }

    // 固钉
    .bug-info-item-affix-container {
      width: 100px;
      height: 220px;
      position: absolute;
      right: 120px;
      top: 120px;
      opacity: 0.8;
      .el-radio-group {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .el-radio-button {
          width: 100%;
          text-align: center;
          background-color: white;
          border-radius: 3px;
          border: 1px solid #ccc;
        }
      }
    }
  }
}

// TODO 添加bug弹窗
.dialog-form-box {
  width: 100%;
  height: 720px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .dialog-form-item-icon svg {
    margin-top: 15px;
  }

  .dialog-form-item-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;


    // bug等级按钮
    .bug-level-0 {
      --el-radio-button-checked-bg-color: #B40404;
      --el-radio-button-checked-border-color: #B40404;
      list-style: none;
      border: 1px solid #dcdcdc;
      border-radius: 5px 0 0 5px;
    }
    
    .bug-level-1 {
      list-style: none;
      border: 1px solid #dcdcdc;
      --el-radio-button-checked-bg-color: #ff0000;
      --el-radio-button-checked-border-color: #ff0000;
    }
    
    .bug-level-2 {
      list-style: none;
      border: 1px solid #dcdcdc;
      --el-radio-button-checked-bg-color: #67c23a;
      --el-radio-button-checked-border-color: #67c23a;
    }
    .bug-level-3 {
      list-style: none;
      border: 1px solid #dcdcdc;
      border-radius: 0 5px 5px 0;
    }

    // bug编辑区域
    .bug-edit-box {
      width: 100%;
      height: 510px;
      border-top: 1px solid #ddd;
      box-shadow: none;
      border-radius: 0;
      padding: 10px 20px;
    }
  }
  // 添加bug操作区域
  .bug-edit-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
  }
}

/* .dialog-form-box {
  width: 100%;
  height: 720px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .dialog-top-box {
    width: 100%;
    height: 40px;
    margin: 10px 20px;
    display: flex;
    justify-content: left;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;

    .dialog-top-left {
      width: 50%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      margin-right: 50px;

      .dialog-ipt {
        height: 32px;
        min-width: 200px;
        max-width: 300px;
      }
    }

    .dialog-top-right {
      width: 50%;
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      margin-left: 50px;

      .dialog-active svg {
        margin-left: 10px;
        color: #409eff;
        position: relative;
      }

      .dialog-active svg:hover {
        color: #79bbff;
        cursor: pointer;
      }

      .dialog-select-cases {
        width: 120px;
        height: 96px;
        position: absolute;
        border: 1px solid #eee;
        border-radius: 5px;
        margin-top: -15px;
        z-index: 999;
        overflow-y: auto;

        .dialog-select-item {
          height: 32px;
          line-height: 32px;
          padding: 5px;
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: flex-start;

          .dialog-select-item-name {
            display: inline-block;
            font-size: 14px;
            margin-left: 5px;
            line-height: 22px;
          }
        }

        .dialog-select-item:hover {
          cursor: pointer;
        }
      }

      .checkedRole {
        background-color: rgb(121.3, 187.1, 255);
        color: white;
      }
    }

    .dialog-title {
      height: 32px;
      flex-wrap: nowrap;
      font: $font-titile;
      line-height: 32px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .el-icon svg {
      width: 32px;
      height: 32px;
      margin: auto;
      text-align: center;
      color: black;
    }

    // bug等级按钮
    .bug-level-1 {
      --el-radio-button-checked-bg-color: #ff0000;
      --el-radio-button-checked-border-color: #ff0000;
    }

    .bug-level-2 {
      --el-radio-button-checked-bg-color: #67c23a;
      --el-radio-button-checked-border-color: #67c23a;
    }
  }

  .bug-edit-box {
    width: 100%;
    height: 530px;
    border-top: 1px solid #ddd;
    box-shadow: none;
    border-radius: 0;
    padding: 10px 20px;
  }

  .bug-edit-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
  }
} */

// TODO 滑块样式
.bug-info-scrollbar::-webkit-scrollbar,
.bug-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.bug-info-scrollbar::-webkit-scrollbar-track,
.bug-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 滚动条轨道的背景色 */
  margin-left: 5px;
}

.bug-info-scrollbar::-webkit-scrollbar-thumb,
.bug-scrollbar::-webkit-scrollbar-thumb {
  background: #5cadff;
  /* 滚动条的背景色 */
  border-radius: 2px;
  /* 滚动条的圆角 */
}

.bug-info-scrollbar::-webkit-scrollbar-thumb:hover,
.bug-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #409eff;
  /* 滚动条 hover 状态的背景色 */
  cursor: pointer;
}

// TODO 横向bug列表
.drawer-bug-list-box {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  .el-card {
    width: 49%;
    height: 150px;
    margin-bottom: 5px;
    font-size: 12px;
    font-family:Arial, Helvetica, sans-serif;
    letter-spacing: 0.1rem;
    padding: 10px;
    cursor: pointer;
    .drawer-bug-item-title {
      width: 100%;
      height: 4.5rem;
      margin-bottom: 10px;
      border-bottom: 1px solid #909399;
      display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      -webkit-line-clamp: 4; /* 限制显示三行，可以根据需要修改数字 */
      overflow: hidden; /* 隐藏超出范围的内容 */
      text-overflow: ellipsis; /* 使用省略号 */
    }
    .drawer-bug-item-2 {
      padding: 0 5px;
    }
    .drawer-bug-samll {
      font-size: 0.65rem;
    }
    .drawer-bug-item-time {
      font-size: 10px;
      color: #909399;
      float: right;
    }
  }
  .el-card:hover {
    background-color: #333333;
    color: white;
  }
}

</style>

<!-- 由于scoped限制，无法自定义el-radio-button__inner属性，临时用全局属性，待完善 -->
<style lang="css">
.el-radio-button__inner {
  border: none;
  width: 100px;
  background-color: transparent;
}
.el-card {
  &.drawer-bug-card {
    padding: 10px;
    .el-card__body {
      padding: 0;
    }
  }
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
